<template>
    <div class="myaccount">
        <div class="myaccountbox">
            <div class="myaccountHead">
                <!-- 页头组件 -->
                <el-page-header content="我的账户" title="" id="ico">
                </el-page-header>
            </div>
        <div class="Useraccount">
            <div class="headportrait">
                <img src="/static/images/myaccount/headportrait.png" alt="">
                <img src="/static/images/myaccount/Rectangle 3@2x.png" alt="">
            </div>
            <div class="account">
                <p>用户账号</p> 
                <p class="Userphone">{{phonenum}}</p>
            </div>
            <div class="modify">
                <div>
                    <ul>
                        <li><img src="/static/images/myaccount/crossout.png" alt=""></li>
                        <li>绑定手机</li>
                        <li><span>已绑定：{{phone}}</span></li>
                        <li> <router-link to="verification">修改</router-link> </li>
                    </ul> 
                </div>
                 <div style="margin-top: 30px;">
                    <ul>
                        <li><img src="/static/images/myaccount/crossout.png" alt=""></li>
                        <li>登录密码</li>
                        <li>
                            <span>密码长度8-12位，且至少包含数字、大小写字母及特殊符号中的任意三种</span>
                        </li>
                        <li> <router-link to="Modifypassword">修改</router-link> </li>
                    </ul> 
                </div>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                code:null,
                phonenum:null,
                phone:null,
            }
        },
        components:{
        },
        methods: {
        //我的账户 返回 
        //    goBack() {
        //     console.log("qwewqe");
        //   },
    },
     mounted(){
            // 当页面加载完，对手机号中间六位进行匿文处理
            this.phonenum=localStorage.getItem("imitatephone")
            this.phonenum=""+ this.phonenum
            let phonee=this.phonenum.substr(0,3)+"******"+this.phonenum.substr(9)
            this.phone=phonee;

            //密码修改成功显示 修改成功提示信息
            let Promptforsuccess=sessionStorage.getItem("Promptforsuccess")
            if (Promptforsuccess){
                this.$message({
                showClose: true,
                message: "账户密码修改成功",
                type: "success",
                });
            }
            sessionStorage.removeItem("Promptforsuccess")
    } 
    }
</script>

<style lang="less" scoped>
.myaccount{
    .myaccountbox{
        width: 100%;
        .myaccountHead{
            height: 50px;
            line-height: 50px;
            width: 95%;
            border-bottom:1px solid #e9eef3;
            margin: 0 auto;
        }
        .Useraccount{
            width: 400px;
            height: 500px;
            // background-color: pink;
            margin: 0 auto;
            margin-top: 65px;
            .headportrait{
                position: relative;
                img{
                    left: 140px;
                    position: absolute;
                    width: 120px;
                    height: 120px;
                }
            }
            .account{
                font-size: 10px;
                padding-top: 130px;
                .Userphone{
                    margin: 0 auto;
                    margin-top: 2px;
                    height: 20px;
                    background-color: #f7f8f9;
                    text-align: center;
                    border: 1px solid #dcdfe6;
                    width: 123px;
                    line-height: 20px;
                }
            }
        }
        .modify{
            margin-top: 10px;
            padding-top: 20px;
            border-top:1px solid #eef0f3;
            div{
                li{
                margin-left: 20px;
                font-size: 12px;
                list-style: none;
                float: left;
                span{
                float:left
                }
                &:nth-child(3){
                    width: 200px;
                    // background-color: red;
                    color: gray;

                }
                &:nth-child(4){
                    margin-left: 50px;
                    a{color: #95c7ff;}
                }
                img{
                    width: 15px;
                    height: 15px;
                }
            }
            }
        }
    }
}
.el-container .el-main .main-view[data-v-087d42bb] {
    background-color: white;
}
.el-page-header {
    line-height: 50px;
}

</style>